<template>
  <view>
    <u-navbar title="第三方账号" :custom-back="onBack"></u-navbar>
    <u-cell-group :border="false">
      <block v-for="(item, index) in list" :key="index">
        <!-- #ifndef MP-WEIXIN -->
        <u-cell-item
          :title="text[item.key]"
          :title-style="titleStyle"
          hover-class="none"
          :value="item.bind == 1 ? '取消绑定' : '未绑定'"
          :value-style="item.bind == 1 ? { color: '#f54030' } : { color: '#B7BAC1' }"
          :arrow="item.bind == 0"
          v-if="item.open == 1"
          @click="handleBind(item)"
        >
          <u-icon slot="icon" size="44" :name="img[item.key]"></u-icon>
        </u-cell-item>
        <!-- #endif -->

        <!-- #ifdef MP-WEIXIN -->
        <u-cell-item
          :title="text[item.key]"
          :title-style="titleStyle"
          hover-class="none"
          :value="item.bind == 1 ? '取消绑定' : '未绑定'"
          :arrow="item.bind == 0"
          v-if="item.open == 1"
          @click="handleBind(item)"
        >
          <u-icon slot="icon" size="44" :name="img[item.key]"></u-icon>
        </u-cell-item>
        <!-- #endif -->
      </block>
    </u-cell-group>
  </view>
</template>

<script>
import setting from '@/settings/projectSetting.js'
export default {
  data() {
    return {
      setting,
      titleStyle: {
        'font-size': '30rpx',
        color: '#303133',
        'margin-left': '16rpx',
      },
      text: {
        weixin: '微信',
        qq: 'QQ',
        sina: '微博',
      },
      img: {
        weixin: '/static/images/login_icon_wechat.png',
        qq: '/static/images/login_icon_qq.png',
        sina: '/static/images/login_icon_weibo.png',
      },
      list: [],
      thirdloginData: {},
    }
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  onShow() {
    uni.hideLoading()
    this.getData()
  },
  onLoad() {
    // #ifdef H5
    let loc_href = this.setting.appBaseUrl + '/pageUser/setting/wechatLogin'
    this.$edu.api
      .getConfigThirdlogin({
        redirect_uri: loc_href,
      })
      .then((res) => {
        this.thirdloginData = res.data
      })
    // #endif
  },
  methods: {
    getData() {
      this.$edu.api.getUserThirdloginBind().then((res) => {
        const { data } = res
        this.list = data
      })
    },
    handleBind(item) {
      // #ifdef H5
      if (item.bind == 1) {
        this.$u.route('/pageUser/setting/removeThirdlogin', { key: item.key })
      } else {
        window.location.href = this.thirdloginData[item.key]
      }
      // #endif

      // #ifdef APP-PLUS
      var that = this
      if (item.bind == 1) {
        this.$u.route('/pageUser/setting/removeThirdlogin', { key: item.key })
      } else {
        uni.getProvider({
          service: 'oauth',
          success: function (res) {
            if (item.key == 'qq') {
              uni.showLoading({
                title: '加载中',
              })
              uni.login({
                provider: 'qq',
                success: function (loginRes) {
                  let oauth = loginRes.authResult.openid
                  that.$edu.api
                    .postBindLogin({
                      type: 'qq',
                      oauth: oauth,
                    })
                    .then((res) => {
                      const { msg, data } = res
                      if (data) {
                        that.handleLoginSucc(data, msg)
                      }
                      setTimeout(() => {
                        uni.hideLoading()
                        that.getData()
                      }, 1000)
                    })
                },
                fail: function (err) {
                  uni.hideLoading()
                },
              })
            } else if (item.key == 'weixin') {
              uni.showLoading({
                title: '加载中',
              })
              uni.login({
                provider: 'weixin',
                success: function (loginRes) {
                  let oauth = loginRes.authResult.openid
                  that.$edu.api
                    .postBindLogin({
                      type: 'weixin',
                      oauth: oauth,
                    })
                    .then((res) => {
                      const { msg, data } = res
                      if (data) {
                        that.handleLoginSucc(data, msg)
                      }
                      setTimeout(() => {
                        uni.hideLoading()
                        that.getData()
                      }, 1000)
                    })
                },
                fail: function (err) {
                  uni.hideLoading()
                },
              })
            }
          },
        })
      }
      // #endif
    },
    handleLoginSucc(data, msg) {
      this.$store.commit('user/setToken', data)
      // 获取个人信息
      this.$store.dispatch('user/setUserInfo')
      this.$u.route({
        type: 'navigateBack',
      })
      // 设置用户头像
      this.$store.commit('user/setAvatar', data.avatar_url)
    },
    // 返回上一页
    onBack() {
      this.$u.route({ type: 'redirectTo', url: '/pageUser/setting/index' })
    },
  },
}
</script>

<style></style>
